import { useDispatch, useSelector } from 'react-redux';

// 导入动态计算的RootState
import { RootState } from './store/store';

import { addTodo, delTodo } from './store/actions/todos';

// type TodoList = {
//   id: number;
//   text: string;
//   done: boolean;
// }[];

// type RootState = {
//   todos: TodoList;
// };

export const Todos = () => {
  const dispatch = useDispatch();

  // 注入redux中的数据
  // 1 指定泛型参数类型
  // const todos = useSelector<RootState, TodoList>((state) => state.todos);
  // 2 指定RootState，进行推断
  const todos = useSelector((state: RootState) => state.todos);
  console.log('todos==>', todos);

  // 事件处理函数dispatch action
  const handleAdd = () => {
    dispatch(addTodo('测试'));
  };

  const handleDel = () => {
    dispatch(delTodo(1));
  };

  return (
    <div>
      <h1>Todos</h1>
      <button onClick={handleAdd}>添加测试</button>
      <button onClick={handleDel}>删除测试</button>
      <ul>
        {todos.map((item) => (
          <li
            key={item.id}
            style={{ textDecoration: item.done ? 'line-through' : '' }}
          >
            {item.text}
          </li>
        ))}
      </ul>
    </div>
  );
};
